/**
 * Created by Administrator on 2017/3/28.
 */
import React from "react";
import { connect } from "dva";
import { Link, routerRedux } from "dva/router";
import ReactEcharts from "echarts-for-react";
import { Button, Icon, List } from "antd-mobile";
import NavBarItem from "../../../components/WitNavBar/index";
import WitEcharts from "../../../components/WitEcharts/index";
import CardItem from "../../../components/WitCard/index";
import styles from "./relation.less";
import { getEchartsFontSize } from "../../../utils/httputil";
import empty from 'is-empty';

const Item = List.Item;

class Relation extends React.Component {
  constructor(...props) {
    super(...props);

    this.initialization();
    this.state = {
      echartsfontSize: 18, // Echarts手机端字体适配
      fontSize: getEchartsFontSize(),
    };
  }

  initialization = async () => {
    await this.props.dispatch({
      type: 'relation/fetch',
      payload: {},
    });
  }

  toRelationlist = () => {
    this.props.dispatch(
      routerRedux.push({
        pathname: `/work/relation/relationlist`
      })
    );
  };

  barOption = ({ xAxisData, seriesData }) => {
    const { fontSize } = this.state;
    return {
      color: ['#3398DB'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        textStyle: {
          fontSize,
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: xAxisData,
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            fontSize,
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            fontSize,
          }
        }
      ],
      series: [
        {
          name: '直接访问',
          type: 'bar',
          barWidth: '50%',
          data: seriesData,
        }
      ]
    };
  }

  pieOption = ({ legendData, seriesData }) => {
    const { fontSize } = this.state;
    const textStyle = { fontSize };
    return {
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)",
        textStyle
      },
      legend: {
        orient: 'vertical',
        left: 'right',
        top: 'top',
        data: legendData,
        textStyle
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '70%'],
          data: seriesData,
          label: {
            normal: {
              textStyle,
            }
          },
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
  }

  render() {
    const { relation } = this.props;
    const org = {
      name: relation.info.name || '所得税处支部',
      secretary: relation.info.secretary || '李春燕',
      contactBy: relation.info.contact_phone || '023-56565656',
    };

    const barXAxisData = ['转接成功', '转接中'];
    const pieLegendData = [
      '市外转接(个人)',
      '市内转接(个人)',
      '市外转接(整建制)',
      '市内转接(整建制)',
    ];

    //  关系转出配置
    const transferStatus = this.barOption({
      xAxisData: barXAxisData,
      seriesData: [4, 2],
    });
    const transferType = this.pieOption({
      legendData: pieLegendData,
      seriesData: [
        { value: 335, name: '市外转接(个人)' },
        { value: 310, name: '市内转接(个人)' },
        { value: 234, name: '市外转接(整建制)' },
        { value: 135, name: '市内转接(整建制)' },
      ],
    });

    // 关系转入配置
    const inTransferStatus = this.barOption({
      xAxisData: barXAxisData,
      seriesData: [4, 2],
    });
    const inTransferType = this.pieOption({
      legendData: pieLegendData,
      seriesData: [
        { value: 335, name: '市外转接(个人)' },
        { value: 310, name: '市内转接(个人)' },
        { value: 234, name: '市外转接(整建制)' },
        { value: 135, name: '市内转接(整建制)' },
      ],
    });

    return (
      <div>
        <NavBarItem
          title="组织关系"
          rightContent={[
            <Link key="/work/zzgx/applytransfer" to="/work/zzgx/applytransfer">申请关系转接</Link>,
          ]}
        />
        {/* 组织信息 */}
        <List
          renderHeader={
            <div>
              <span style={{ fontSize: '0.32rem' }}>组织信息</span>
            </div>}
        >
          <Item>
            <span style={{ fontSize: '0.32rem' }}>组织名称</span>
            <span className={styles.textless}>{org.name}</span>
          </Item>
          <Item>
            <span style={{ fontSize: '0.32rem' }}>组织书记</span>
            <span className={styles.textless}>{org.secretary}</span>
          </Item>
        </List>
        <List className={styles.listless}>
          <Item>
            <span style={{ fontSize: '0.32rem' }}>组织电话</span>
            <span className={styles.textless}>{org.contactBy}</span>
          </Item>
        </List>
        <CardItem
          header={{
            title: '关系转出',
          }}
          body={
            <div>
              <div className="relation-bar">
                <ReactEcharts option={transferType} style={{ height: '400px' }} />
              </div>
              <div className="relation-pie" onClick={this.toRelationlist}>
                <ReactEcharts option={transferStatus} style={{ height: '300px' }} />
              </div>
            </div>
          }
        />
        <CardItem
          header={{
            title: '关系转入',
          }}
          body={
            <div>
              <div className="relation-bar">
                <ReactEcharts option={inTransferType} style={{ height: '400px' }} />
              </div>
              <div className="relation-pie">
                <ReactEcharts option={inTransferStatus} style={{ height: '300px' }} />
              </div>
            </div>
          }
        />

      </div>
    );
  }
}

function mapStateToProps({ relation, user }) {
  return {
    relation,
    user,
  };
}
export default connect(mapStateToProps)(Relation);
// export default relation;
